import React, { PureComponent } from 'react';
import { Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import { LoginWrapper, LoginBox, Input, Button } from './style';
import { actionCreators } from './store';

class Login extends PureComponent {
  constructor(props) {
    super(props);
    this.account = React.createRef();
    this.password = React.createRef();
  }

  render () {
    const { loginStatus } = this.props;
    if (!loginStatus) {
      return (
        <LoginWrapper>
          <LoginBox>
            <Input placeholder="账号" ref={this.account} />
            <Input placeholder="密码" type='password' ref={this.password} />
            <Button onClick={() => {
              this.props.login(this.account.current, this.password.current)
            }}>登录</Button>
            {/*  <Input placeholder='账号' innerRef={(input) => { this.account = input }} />
            <Input placeholder='密码' type='password' innerRef={(input) => { this.password = input }} />
            <Button onClick={() => this.props.login(this.account, this.password)}>登陆</Button> */}
          </LoginBox>
        </LoginWrapper>
      )
    } else {
      return <Redirect to='/' />
    }
  }
}

const mapState = (state) => ({
  loginStatus: state.getIn(['login', 'login'])
})

const mapDispatch = (dispatch) => ({
  login (accountElem, passwordElem) {
    dispatch(actionCreators.login(accountElem.value, passwordElem.value))
  }
})

export default connect(mapState, mapDispatch)(Login);
